<!doctype html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/user/css/login/login_styles.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/user/css/login/login-back.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!--  滑块验证 -->
    <link rel="stylesheet" href="/user/css/verify-submit/style.css">
    <script type="text/javascript" src="/user/js/verify-submit/style.js"></script>

    <!-- 下拉列表 css js -->
    <link rel="stylesheet" type="text/css" href="/user/css/formlist/style2.css" />
    <script src="/user/js/formlist/modernizr.custom.63321.js"></script>
    <!--[if IE]>
    <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <title>JAVA兴趣社</title>
</head>
<style>
    
</style>
<body>
<!-- particles.js container -->
<div id="particles-js" style="display: flex;align-items: center;justify-content: center">
    <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="472" height="625"></canvas>
</div>


<div class="jq22-container" style="padding-top:50px">
    <div class="login-wrap">
        <div class="login-html">
            <input id="tab-1" type="radio" name="tab" class="sign-in" th:checked="${isLogin}"> <label for="tab-1"
                                                                                                      class="tab">登录</label>
            <input id="tab-2" type="radio" name="tab" class="sign-up" th:checked="${!isLogin}"> <label for="tab-2"
                                                                                                       class="tab">注册</label>

            <div class="login-form">
                <div class="sign-in-htm">
                    <div style="height:40px">
                        <h4 style="text-align: center;color:red" th:text="${msg}"></h4>
                    </div>
                    <form action="/login" method="post" id="sign-in-form">
                        <div class="group">
                            <label for="user_one" class="label">手机号</label>
                            <input id="user_one" name="username" type="text" class="input">

                            <!-- <div class="col-xs-1 col-sm-1">
                                <div id="nameError" style="display: none" class="row"><img src="/user/images/errorhasname.png" width="30" alt=""></div>
                                <div id="nameSuccess" style="display: none" class="row"><img src="/suer/images/sucessnoname.png" width="30" alt=""></div>
                            </div> -->
                        </div>
                        <div class="group">
                            <label for="pass" class="label">密码</label>
                            <input id="pass" name="password" type="password" class="input" data-type="password"
                                   required>
                        </div>
                        <div class="group">
                            <input id="check" type="checkbox" class="check" checked>
                            <label for="check"><span class="icon"></span>记住我</label>
                        </div>
                        <div class="group">
                            <input id="login" type="submit" class="button"    value="登录">
                        </div>
                    </form>
                    <div class="hr"></div>
                    <div class="foot-lnk">
                        <a href="#forgot">忘记密码?</a>
                    </div>
                </div>


                <div class="sign-up-htm">
                    <div style="height:30px">
                        <p style="text-align: center;color:red" th:text="${msg}"></p>
                    </div>
                    <form action="/user/register" method="post" id="sign-up-form">
                        <div>

                            <div class="group">
                                <label for="grade" class="label">入学年份</label>
                                <select id="cd-dropdown" name="grade" class="cd-select">
                                    <option value="2017">2017</option>
                                    <option value="2018">2018</option>
                                    <option value="2019"  selected>2019</option>
                                    <option value="2020">2020</option>
                                </select>
                            </div>

                            <div class="group">
                                <label for="realName" class="label">姓名</label>
                                <input id="realName" name="realName" type="text" class="input" required>
                            </div>
                            <div class="group">
                                <label for="pass" class="label">手机号</label>
                                <input id="phone" name="mobile" type="tel" class="input" required>
                            </div>
                            <div class="group">
                                <label for="college" class="label">学院</label>
                                <input id="college" name="college" type="text" class="input" required>
                            </div>
                            <div class="group">
                                <label for="professional" class="label">专业</label>
                                <input id="professional" name="professional" type="text" class="input" required>
                            </div>
                            
                          
                            <div class="group">
                                <input id="register" type="submit" class="button"     value="注册">
                            </div>
                        </div>
                    </form>
                    <div class="foot-lnk">
                        <label for="tab-1"> <a href="">我已经是社团小伙伴了,点我返回登录。</a></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="slideBar" style="position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%);  max-width: 50%; text-align: center;"></div>


<!-- scripts -->
<script src="/user/js/login/login.js"></script>
<script src="/user/js/login/loginApp.js"></script>
<script>
    function changeImg() {
        let pic = document.getElementById('picture');
        console.log(pic.src)
        if (pic.getAttribute("src", 2) == "img/check.png") {
            pic.src = "img/checked.png"
        } else {
            pic.src = "img/check.png"
        }
    }
</script>

<script src="/user/js/login/my-jquery.js"></script>


<!-- 下拉列表 start  -->
<script type="text/javascript" src="/user/js/formlist/jquery.dropdown.js"></script>
		<script type="text/javascript">
			$( function() {
				$( '#cd-dropdown' ).dropdown( {
					gutter : 5,
					delay : 100,
					random : true
				} );
			});
		</script>
<!-- 下拉列表 end  -->



<!--   滑块验证  start -->
<script type="text/javascript">
    function verify(dom, form_id){
        var dataList = ["0","1"];
        var options = {
            dataList: dataList,
            success:function(){  
                console.log("show");
                $("#slideBar").fadeOut();
                $("#" + form_id).submit();
            },
            fail: function(){
                console.log("fail");  
                $("#slideBar").fadeIn();
            }
        };
        $("#" + dom).click(function(){
            SliderBar("slideBar", options);
            return false;
        })
    }

    verify("login", "sign-in-form");
    verify("register", "sign-up-form");
</script>
<!-- 滑块验证  end -->



</body>
</html>